;(function(){
    const template=`        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			
    <!--右边上半区域-->
    <!--<h1 class="page-header">Dashboard</h1>-->
    <!--声明插槽-->
    <slot name="dashboard"></slot>
    <app-dashboard :hobbies="hobbies" @delete_hobby="deleteHobby"></app-dashboard>
    <!--右边下半区域-->
    <!--通过属性绑定的方式向子组件传递数据
        @自定义事件名=事件监听函数
        在子组件dashboard中触发了delete_hobby事件来调用deleteHobby
    -->
  <h2 class="sub-header">Section title</h2>
    <app-homelist :emps="emps" :deleteEmp="deleteEmp" ></app-homelist>
</div>`
    window.AppHome={
        template:template,
        data() {
          return {
            hobbies:["coding","睡觉","吃饭","打豆豆"],
            emps:[],
          }
        },
        methods: {
          //删除一个员工的函数
          deleteEmp(index){
            this.emps.splice(index,1);
          },
          //删除爱好的函数
          deleteHobby(index){
            this.hobbies.splice(index,1);
          }
        },
        //获取员工信息
        created() {
          axios.get("http://127.0.0.1:5500/vue-08-router/02-bootstrap-vue-router/emp.json")
            .then((res)=>{
              console.log(res.data);
              this.emps=res.data;
            })
            .catch((error)=>{
              alert(error.message);
            });
        },
        components:{
          "app-dashboard":Dashboard,
          "app-homelist":HomeList
        }
    }
})()